<!-- 引入 Cesium 并初始化地球 -->
<template>
  <div id="cesiumContainer" style="width: 100%; height: 100vh"></div>
  <button @click="goToHome">返回首页</button>
</template>

<script setup>
import * as Cesium from 'cesium';
import { onMounted, onUnmounted } from 'vue';
import { useRouter } from 'vue-router';

// 设置 Cesium 的访问令牌
Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI4MTNlOWJkNy01NTU0LTQ3ZWQtYmM3Yi1mNGViODFhOGY3NzQiLCJpZCI6MjgwODczLCJpYXQiOjE3NDEwNzIwNTl9.v7K25kZiBHwarMikqFQEH-NROT27E4JjdsmpUULH4J0";

const router = useRouter();
const goToHome = () => {
  router.push('/');
};

let viewer = null;

onMounted(() => {
  // 初始化 Cesium Viewer
  viewer = new Cesium.Viewer('cesiumContainer');
  console.log('Cesium Viewer initialized:', viewer);

  // 加载 CZML 数据源
  const czmlDataSource = new Cesium.CzmlDataSource();
  czmlDataSource.load('/models/example.czml').then(dataSource => {
    viewer.dataSources.add(dataSource);
    console.log('CZML data loaded successfully');
  }).catch(error => {
    console.error('Failed to load CZML data:', error);
  });

  // 启用时钟动画
  viewer.clock.shouldAnimate = true;
});

// 在组件卸载时清理资源
onUnmounted(() => {
  if (viewer) {
    // 移除所有数据源
    viewer.dataSources.removeAll();
    // 销毁 viewer
    viewer.destroy();
    viewer = null;
  }
});
</script>
